<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style type="text/css">
        #flinks{width:500px;}
        /* 文字上下滚动 */
        .scroll-box{position:relative;top:0;overflow:hidden;padding:0 10px;display:inline-block;height:29px;line-height:29px}
        .scroll-box.on{background:#fff;z-index:2;overflow:auto;height:auto !important;box-shadow:1px 1px 10px #888}
        .scroll-box.on li{top:0 !important;border-bottom:1px dotted #ccc}
        .scroll-box li{position:relative;}
        .scroll-box a{display:inline-block;white-space:nowrap;padding-top:0 !important;padding-bottom:0 !important;margin-top:0 !important;margin-bottom:0 !important;}
        .scroll-mask{z-index:1;display:none;position:fixed;top:0;right:0;bottom:0;left:0;display:none;background-color:rgba(0,0,0,0.5);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000)}
        .scroll-mask.on{/*display:block;*/}
    </style>

    <script src="${s.ctx}/static/js/jquery-3.5.1.min.js" type="text/javascript"></script>
<!--    <script type="text/javascript" src="http://libs.baidu.com/jquery/1.7.1/jquery.min.js"></script>-->
</head>
<body>
<h1>js实现文字上下滚动效果</h1>
<h2>文字滚动示例一：</h2>
<p>适用于单行区域文字或图片上下滚动广告</p>
<ul class="scroll-box box-expand" id="test">
    <li>双十一大额优惠券，领券折上折！</li>
    <li>※ 新人福利社，超级好货0元购 ※</li>
    <li>韩都衣舍，闺蜜衣橱 — 天猫女装销量冠军</li>
    <li>20181031期福利红包，订单提交时抵现使用</li>
    <li>淘宝网优惠，官方活动一网打尽</li>
</ul>
<!--<ul class="scroll-box box-expand">-->
<!--    <li><a href="#" target="_blank">双十一大额优惠券，领券折上折！</a></li>-->
<!--    <li><a href="#" target="_blank" >※ 新人福利社，超级好货0元购 ※</a></li>-->
<!--    <li><a href="#" target="_blank">韩都衣舍，闺蜜衣橱 — 天猫女装销量冠军</a></li>-->
<!--    <li><a href="#" target="_blank" >20181031期福利红包，订单提交时抵现使用</a></li>-->
<!--    <li><a href="#" target="_blank">淘宝网优惠，官方活动一网打尽</a></li>-->
<!--</ul>-->

<!--<h2>文字滚动示例二：</h2>-->
<!--<p>适合于单行区域友情链接上下滚动</p>-->
<!--<ul id="flinks" class="scroll-box">-->
<!--    <li>-->
<!--        <a href="#" target="_blank">友情链接1</a>-->
<!--        <a href="#" target="_blank">友情链接2</a>-->
<!--        <a href="#" target="_blank">友情链接3</a>-->
<!--        <a href="#" target="_blank">友情链接4</a>-->
<!--        <a href="#" target="_blank">友情链接5</a>-->
<!--        <a href="#" target="_blank">友情链接6</a>-->
<!--        <a href="#" target="_blank">友情链接7</a>-->
<!--        <a href="#" target="_blank">友情链接8</a>-->
<!--        <a href="#" target="_blank">友情链接9</a>-->
<!--        <a href="#" target="_blank">友情链接10</a>-->
<!--    </li>-->
<!--</ul>-->
</body>
</html>
<script type="text/javascript">
    (function ($) {
        /* 单行文字上下滚动 */
        $.fn.adScroll = function (options) {
            // 默认配置
            var scrollOptions = {
                interval: 6000
            };
            $.extend(scrollOptions, options);

            $(this).each(function () {
                var scrollObj = $(this);
                // 单行内容无需滚动显示，取消初始化
                var totalHeight = 0;
                scrollObj.find('li').each(function () { totalHeight += $(this).height() });
                var liSize = Math.round(totalHeight / scrollObj.height());
                if(liSize <= 1) return;

                // 初始化开始
                scrollObj.attr('index', '0');
                // 重置滚动容器高度
                scrollObj.height(scrollObj.find('a').outerHeight(true));
                // 重置滚动项 li 高度
                scrollObj.find('li').size() > 1 && scrollObj.find('li').height(scrollObj.height());
                // 外层容器，辅助定位
                var containerObj = $('<div>').height(scrollObj.outerHeight(true));
                scrollObj.wrap(containerObj);
                // 遮罩层
                var maskObj = $('<div>').addClass('scroll-mask');
                scrollObj.after(maskObj);

                setInterval(function () {
                    if (!scrollObj.hasClass('on')) {
                        // 所有 li 高度之和除以容器高度
                        var liTotalHeight = 0;
                        scrollObj.find('li').each(function () { liTotalHeight += $(this).height() });
                        var size = Math.round(liTotalHeight / scrollObj.height());
                        var curIndex = parseInt(scrollObj.attr('index'));
                        var next = curIndex + 1 >= size ? 0 : curIndex + 1;
                        if (next == 0) {
                            // scrollObj.find('li').animate({ top: 0 }, 'slow');

                            var html = "     <li>双十一大额优惠券，领券折上折123！</li>\n" +
                                "    <li>※ 新人福利社，超级好货0元购 123※</li>\n" +
                                "    <li>韩都衣舍，闺蜜衣橱 — 天猫女装销量冠军123</li>\n" +
                                "    <li>20181031期福利红包，订单提交时抵现使用123</li>\n" +
                                "    <li>淘宝网优惠，官方活动一网打尽123</li> ";
                            $("#test").html(html);
                            scrollObj.find('li').animate({ top: 0 }, 'slow');

                        } else {
                            scrollObj.find('li').animate({ top: '-=' + scrollObj.height() }, 'slow');
                        }
                        scrollObj.attr('index', next);
                    }
                }, scrollOptions.interval);

                // 滚动列表可以被展开
                // if(scrollObj.hasClass('box-expand')) {
                //     // 切换
                //     scrollObj.mouseover(function () {
                //         scrollObj.css('top', scrollObj.find('li').css('top'));
                //         scrollObj.addClass('on');
                //         maskObj.addClass('on');
                //     }).mouseout(function () {
                //         scrollObj.css('top', 0);
                //         scrollObj.removeClass('on');
                //         maskObj.removeClass('on');
                //     });
                // }
            });
        };
    })(jQuery);

    $(function(){
        if ($('.scroll-box').size() > 0) {
            $('.scroll-box').adScroll({interval: 2000});
        }
    })

</script>